<template>
	<view class="content">
		<image class="bgimage" src="https://pic.imgdb.cn/item/6194da4c2ab3f51d9160804a.jpg"></image>
		<image class="logo" src="/static/images/LNlogo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="int">
			<view class="int-title"><text>请输入账号</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="number" v-model="userNum" placeholder="" maxlength="12" />
		</view>
		<view class="int">
			<view class="int-title"><text>请输入密码</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="text" v-model="userPwd" :password="filled" password="ture" placeholder="" />
		</view>
		<view class="int">
			<view class="int-title"><text>再次输入密码</text></view>
			<view class="empty"></view>
			<view class="right">
				<slot></slot>
			</view>
			<input type="text" v-model="reUserPwd" :password="filled" password="ture" placeholder="" />

		</view>
		<view class="butt">
			<button class="register" @click="onconfirm()">注 册</button>
			<button class="login" @click="oncancel()">取 消</button>
		</view>
		<!-- <view class="copyright">© 2021-2022 · 岭梦空间 </view> -->
	</view>
</template>

<script>
	import md5 from "../../util/md5.js"
	export default {
		data() {

			return {
				filled: false,
				barHeight: uni.getStorageSync("barHeight"),
				disabled: false,
				//用户输入内容
				userNum: "",
				userPwd: "",
				reUserPwd: "",


				obj: {
					sClass: "",
					College: "",
					sGrade: "",
					sId: "",
					sName: "",
					sPassword: "",
					sStatus: ""
				},
				rules: {
					userNum: {
						rule: /^20[123456789]\d{9}$/,
						msg: "手机号格式错误"
					},
				}

			};
		},

		methods: {
			onconfirm() {
				let sId = this.userNum
				let sPassword = this.userPwd
				let reUserPwd = this.reUserPwd
				if (sId == "") {
					uni.showToast({
						title: "您还没有输入账号！",
						icon: "none"
					})
					return
				}
				if (sPassword == "") {
					uni.showToast({
						title: "您还没有输入账号密码",
						icon: "none"
					})
					return
				}
				if (reUserPwd != sPassword) {
					uni.showToast({
						title: "您两次输入的密码不一样，请重新输入",
						icon: "none"
					})
					return
				}
				this.$set(this.obj, 'sId', this.userNum)
				this.$set(this.obj, 'sPassword', md5(this.userPwd))
				this.$set(this.obj, 'sClass', this.obj.sClass)
				this.$set(this.obj, 'sName', this.obj.sName)
				this.$set(this.obj, 'College', this.obj.College)
				this.$set(this.obj, 'sGrade', this.obj.sGrade)
				this.$set(this.obj, 'sStatus', this.obj.sStatus)

				const res = this.$myRequest({
					url: "/student/register",
					data: {
						sId: this.obj.sId,
						sPassword: this.obj.sPassword,
						sClass: this.obj.sClass,
						College: this.obj.College,
						sGrade: this.obj.sGrade,
						sName: this.obj.sName,
						sStatus: this.obj.sStatus
					},
					method: 'POST',
				})
				uni.showToast({
					title: "您已经注册成功，请等待管理员审核"
				})
			},
			oncancel() {
				uni.navigateTo({
					url: "/pages/login/login",
				})
			},
		}
	}
</script>

<style lang="scss">

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bgimage {
		margin-top: 62%;
		background-repeat: no-repeat;
		position: absolute;
		z-index: -1;
		background-size: 100%;
		width: 100%;
		min-height: 100%;

	}

	.logo {
		height: 210rpx;
		width: 680rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2vw;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.int {
		margin: 30rpx 25rpx 20rpx;
		border-radius: 25rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border: 3rpx solid #965353;

		input {
			content: '';
			width: 420rpx;
			height: 55rpx;
			flex: 1;
			font-size: 32rpx;

		}

		&-title {

			width: 190rpx;
			line-height: 30rpx;

			text {
				display: flex;
				font-size: 30rpx;
				font-weight: 600;
				color: #965353;

			}
		}
	}

	.logopic {
		// display: flex;
		height: 480rpx;
		background-size: 100%;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
	}

	.empty {
		height: 35rpx;
		width: 2rpx;
		background-color: #bbbbbb;
		margin-left: rpx;
	}

	.right {
		flex: 0;
		padding-right: 25rpx;
	}

	.forget {
		position: relative;
		left: 27vw;

		text {
			color: #808080;
		}
	}

	.butt {
		display: flex;
		margin-top: 30rpx;
		width: 600rpx;

		text {
			display: flex;
			align-items: center;
			text-align: center;
		}

		.login,
		.register {
			text-align: center;
			width: 210rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background-color: #02a7ff;
			color: white;
			font-size: 32rpx;
			font-weight: 400;
		}
	}

	.copyright {
		position: absolute;
		bottom: 10rpx;
		font-size: 28rpx;
		color: #9f9f9f;
	}
</style>
